<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScribeHow - All Recordings</title>
  <link rel="stylesheet" href="manager.css">
</head>
<body>
  <div class="manager-container">
    <!-- 头部 -->
    <header class="manager-header">
      <div class="header-content">
        <h1>All Recordings</h1>
        <div class="header-actions">
          <input type="search" class="search-input" id="searchInput" placeholder="Search recordings...">
          <select class="sort-select" id="sortSelect">
            <option value="date-desc">Newest First</option>
            <option value="date-asc">Oldest First</option>
            <option value="name-asc">Name (A-Z)</option>
            <option value="name-desc">Name (Z-A)</option>
            <option value="steps-desc">Most Steps</option>
            <option value="steps-asc">Least Steps</option>
          </select>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="manager-main">
      <div class="recordings-grid" id="recordingsGrid">
        <div class="loading">
          <div class="loading-spinner"></div>
          <p>Loading recordings...</p>
        </div>
      </div>
    </main>

    <!-- 删除确认对话框 -->
    <div class="modal" id="deleteModal">
      <div class="modal-content modal-small">
        <div class="modal-header">
          <h2>Delete Recording</h2>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete this recording? This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" id="cancelDeleteBtn">Cancel</button>
          <button class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
        </div>
      </div>
    </div>
  </div>

  <script src="manager.js"></script>
</body>
</html>
